<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子模型内边距和外边距对比(box model padding and margin contrast)</title>
  <!-- 
    CSS的盒子模型中的内边距（Padding）和外边距（Margin）是两个重要的概念，它们在页面布局和样式设计中起着不同的作用。
    以下是它们的区别和主要要点： 
 
      1. 内边距（Padding）： 
      - 内边距是指内容区域与边框之间的距离。 
      - 可以使用padding属性来设置元素的内边距大小。 
      - 内边距影响元素内部内容与边框之间的间距。 
      
      2. 外边距（Margin）： 
      - 外边距是指元素与其他元素之间的距离。 
      - 可以使用margin属性来设置元素的外边距大小。 
      - 外边距影响元素与周围元素之间的间距和对齐方式。 
 
      总结： 
      - 内边距用于控制元素内部内容与边框之间的间距，影响元素内部的布局。 
      - 外边距用于控制元素与周围元素之间的间距，影响元素在页面布局中的位置和对齐方式。
   -->
   <style>
     .container {
       width: 500px;
       height: 500px;
       border: 1px solid black;

       box-sizing: border-box; /* 设置盒子模型为标准盒子模型 */
     }

     .margin {
       height: 100px;
       margin: 20px;
       background-color: #f1f1f1;
     }

     .padding {
       height: 100px;
       padding: 20px;
       background-color: #ccc;
     }

     .item {
       width: 50%;
       height: 50%;
       background-color: saddlebrown;
     }
   </style>
</head>
<body>

  <div class="container">
    <div class="margin">
      <div class="item"></div>
    </div>
    <div class="padding">
      <div class="item"></div>
    </div>
  </div>
  
</body>
</html>